<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="/static/css/index.css"/>
	<script src="/static/js/jquery-3.2.1.min.js"></script>
	<script src="/static/js/echarts.min.js"></script>
    <title>消息中心</title>
</head>
<body>
    <header>
    	<div class="lf">
    		<a class="home" href="{% url 'xzbindex' %}">系统首页</a>
    		 <a href="{% url 'xzbbbs' %}">论坛</a>
    		<a href="{% url 'xzbupload' %}">上传资料</a>
    	</div>
    	<div id="search">
    		<input type="text" name="name" 
    			placeholder="请输入要搜索的资源" autocomplete="off"/>
			<a class="search btn">搜索</a>
    	</div>
    	
    	<div class="rf">
    		<div class="email-info">
				<b>99</b>
				<ul class="email-list">
					<li><a href="{% url 'xzbmessage' %}">官方<b>0</b></a></li>
					<li><a href="{% url 'xzbmessage' %}">通知<b>0</b></a></li>
					<li><a href="{% url 'xzbchat' %}">私信<b>0</b></a></li>
				</ul>
			</div>
    		<a class="info" href="{% url 'xzbpersonal' %}">个人中心</a>
    		<a class="cols" href="{% url 'xzbshoucang' %}">收藏</a>
    		<a class="exit">退出登录</a>
    	</div>
    </header>
	
	<article>
		<!-- 网站主体 -->
		<div id="main">
			<section class="ct">
				<h1 class="detail-msg">消息中心</h1>
				
				<div class="bg-hr"></div>
				<ul class="msg-menu">
					<li class="official">
						<a class="active">官方(<b>{{ official_count }}</b>)</a>
							{% if official %}
							<div class="msg-content">
								{% for off in official %}
								<a class="msg" href="#">
									<span>【{{ off.Noticetype }}】{{ off.Content }}</span>
									<time>{{ off.Create_time|date:"Y/m/d H:i:s" }}</time>
								</a>
								{% endfor %}
							</div>
							{% else %}
							<!-- 没有消息的提示 -->
							<div class="msg-content">
								<a class="no-data"><img src="/static/images/404.svg" alt="No data"/>暂无消息</a>
							</div>
						{% endif %}
					</li>
					<li class="notify">
						<a>通知(<b>{{ notice_count }}</b>)</a>
						{% if notice %}
							<div class="msg-content">
								{% for not in notice %}
								<a class="msg" href="#">
									<span>【{{ not.Noticetype }}】{{ not.Content }}</span>
									<time>{{ not.Create_time|date:"Y/m/d H:i:s" }}</time>
								</a>
								{% endfor %}
							</div>
							{% else %}
							<!-- 没有消息的提示 -->
							<div class="msg-content">
								<a class="no-data"><img src="/static/images/404.svg" alt="No data"/>暂无消息</a>
							</div>
						{% endif %}
					</li>
					<li class="letter">
						<a href="{% url 'xzbchat' %}">私信(<b>0</b>)</a>
						<div class="msg-content chatx">
							<iframe src="{% url 'xzbchat' %}" id="chat" name="chat"></iframe>
						</div>
					</li>
					<li class="blist">
						<a>黑名单</a>
						<div class="msg-content">
							<a class="msg">以下用户已添加至黑名单，你将不再收到对方的消息</a>
							{% for entry in black_list %}
							<a class="msg">
								<span><img src="/static/images/unknown.png"/>{{ entry.Blackuserid }}</span>
								<form method="post" action="{% url 'xzbmessage' %}">
									{% csrf_token %}
									<input type="hidden" name="Userid" value="{{ entry.Userid }}">
									<input type="hidden" name="Blackuserid" value="{{ entry.Blackuserid }}">
									<input type="hidden" name="action" value="remove">
									<button type="submit" class="btn">解除</button>
								</form>
							</a>
							{% empty %}
							<a class="msg">
								<span><img src="/static/images/404.svg">暂无黑名单用户</span>
							</a>
							{% endfor %}
						</div>
					</li>
				</ul>
				
			</section>
			
		</div>
	</article>
	<footer>
		<p class="decro">本站所有资源信息均由网友上传,本站只是为了推广资源让更多读者下载,使用。如涉侵权，请联系管理员</p>
		<p class="cr">Copyright © 2021-2025 <span class="site">爱下载资源分享平台</span> All Rights Reserved.</p>
		<p class="num">沪ICP备14048333号</p>
	</footer>

	<script>
		$(function(){

			$(".msg-menu li > a").on("click", function(event){
				$(this).addClass("active").parent().siblings().children("a").removeClass("active");
			})

			$(".msg-content .apply").on("click", function(event){
				$(this).next("input").show().parent().siblings().find("input").hide();
			})
		})


	</script>
</body>

</html>